<template>
    <view class="tooltip fsi-0-2 white" :class="{'auto-width':data && data.type==3}" 
	v-show="data!=null" ref="tooltip" :style="{left:left,top:top}">
        <view v-if="iconUrl != null" class="tooltip-icon"
            :class="{'typeicon-1':data.type==1, 'typeicon-2':data.type==2}">
            <image :src="iconUrl">
        </view>
        <view class="tooltip-ctx">
            <view v-if="data && data.text != null" class="tooltip-text fsi-0-2">
                {{ data.text }}
            </view>
            <view v-if="data && data.subText != null" class="tooltip-text fsi-0-2">
                {{ data.subText }}
            </view>

            <view v-if="data && data.type==3" class="table">
                <view v-for="(dat,index) in data.data" :key="index" class="tbs">
                    <view>
                        <view class="data-type-icon"
                            :class="{'icon-red':dat[0]=='red', 'icon-yellow':dat[0]=='yellow', 'icon-dark':dat[0]=='dark', 'icon-green':dat[0]=='green', 'icon-blue':dat[0]=='blue'}">
                        </view>
                        <view>{{dat[1]}}</view>
                    </view>
                    <view v-if="dat[2] != null">
                        {{dat[2]}}
                    </view>
                    <view v-if="dat[3] != null">
                        {{dat[3]}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                data: null,
				left:'',
				top:''
            }
        },
        computed: {
            iconUrl() {
                if (!this.data) {
                    return;
                }
                switch (this.data.type) {
                    // case 1: return require('./location.png'); break;
                    case 2: return this.data.icon; break;
                    default: return null;
                }
            },
        },
        mounted() {
            this.$bus.$on('show-tooltip', this.onShowTooltip);
            this.$bus.$on('hide-tooltip', this.onHideTooltip);
        },
        methods: {
            onShowTooltip(param) {
                this.data = param[0];
                var locX = param[1];
                var locY = param[2];
                var dom = this.$refs.tooltip
				// 当X轴位置超出屏幕 使位置向左偏移
                if (locX + 200 >=1920) {
                    locX = 1920 -200;
                }

                if (locX < 20) {
                    locX = 20;
                }
				// 当Y轴位置超出屏幕 使位置向上偏移
                if (locY + 200 >= 1200) {
                    locY = 1200  -200;
                }

                if (locY < 20) {
                    locY = 20;
                }
                this.left = locX +20+ 'px';
                this.top = locY +20+ 'px';
            },

            onHideTooltip() {
                this.data = null;
            }
        },
    }
</script>
<style scoped lang="scss">
    .table{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 17px;
        background: none;
        border: none;
        .tbs{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
            view:nth-child(1){
                display: flex;
                align-items: center;
            }
        }
    }

    .data-type-icon {
        width: 7px;
        height: 7px;
        margin-right: 4px;
    }

    .icon-red {
        background: url("../../static/icon-tip-1.png") 0 0 no-repeat;
		background-size: 100% 100%;
    }

    .icon-yellow {
        background: url("../../static/icon-tip-2.png") 0 0 no-repeat;
		background-size: 100% 100%;
    }

    .icon-dark {
        background: url("../../static/icon-tip-5.png") 0 0 no-repeat;
		background-size: 100% 100%;
    }

    .icon-green {
        background: url("../../static/icon-tip-4.png") 0 0 no-repeat;
		background-size: 100% 100%;
    }

    .icon-blue {
        background: url("../../static/icon-tip-4.png") 0 0 no-repeat;
		background-size: 100% 100%;
    }

    .auto-width {
        width: auto !important;
        min-width: 48px;
    }

    .tooltip {
        
		// background: url("../../static/tooltip-bg.png") 0 0 no-repeat;
		// background-size: 100% 100%;
		
		background: rgba(65,60,43,0.8);
		border-radius: 6px;
		border: 1px solid rgba(245,166,35,0.5);
		
        // width: 5.5rem;
        padding: 12px;
        display: flex;
        z-index: 10;
        white-space: pre-wrap;
        /* border: 0.01rem dashed #ffffff; */
        pointer-events: none;
        position: absolute;

        .tooltip-ctx {
            width: 100%;
        }
    }

    .tooltip-icon {
        display: flex;
        position: relative;
        justify-content: center;
        margin-right: 0.1rem;
    }

    .typeicon-1>img {
        width: 0.18rem;
        height: 0.27rem;
        margin-top: 0.03rem;
    }


    .typeicon-2>img {
        width: 0.22rem;
        height: 0.22rem;
    }

    .tooltip-text {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 17px;
        margin-bottom: 6px;
    }
</style>